<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="stylesheet" href="css/iview.min.css">
  <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <!-- Bootstrap Core CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/daterangepicker.css">
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.css">
  <link href="css/pages/user-card.css" rel="stylesheet">
  <link href="css/magnific-popup.css" rel="stylesheet">
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo" />
              <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
            <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="5"></c-slider>
        </nav>
      </div>
    </aside>
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">拼团配置</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item">营销活动</li>
              <li class="breadcrumb-item">拼团</li>
              <li class="breadcrumb-item">拼团商品列表</li>
              <li class="breadcrumb-item active">拼团配置</li>
            </ol>
          </div>
        </div>
        <div class="bgfff p-l-29 p-r-31 p-t-29 p-b-50">
          <div class="row assemble-form">
            <div class="col-xl-5 form-item">
              <span>活动时长：</span>
              <!-- <input type="text" class="form-control p-l-23 phgray bgfff w300" id="time" style="max-width: 400px; width: 400px!important;"> -->
              <Date-picker type="datetimerange"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择相应的活动时长"
               id="date-picker" @on-change="dateChange">
              </Date-picker>
            </div>
              <div class="col-xl-6 col-lg-6 form-item">
                  <span class="m-r-10">单账号最多开团数：</span>
                  <input type="number" class="form-control p-l-23 phgray" v-model="createLimit">
              </div>
            <div class="col-xl-5 col-lg-6 form-item">
              <span>成团人数：</span>
              <input type="text" class="form-control p-l-23 phgray" v-model="peopleNum">
              <span class="m-l-10">拼团人数>1</span>
            </div>
            <div class="col-xl-5 col-lg-6 form-item">
              <span>单账号最多购买数：</span>
              <input type="number" class="form-control p-l-23 phgray" v-model="maxPurchase">
            </div>
              <div class="col-xl-5 col-lg-6 form-item">
                  <span>拼团有效期(小时)：</span>
                  <input type="text" class="form-control p-l-23 phgray" v-model="termOfValidity">
              </div>
            <div class="col-xl-6 col-lg-6 form-item">
              <span>单账号最多参团数：</span>
              <input type="number" class="form-control p-l-23 phgray" v-model="joinLimit">
            </div>
          </div>
          <div class="m-b-10 text-danger">
            注：请填写商品库存，一旦拼团人数和购买数量达到商品库存的值，该拼团则进入关闭状态，用户点击拼团或参团 则提示“该商品已售罄”。
          </div>
          <div class="disflex align-cen">
            <span>添加拼团商品</span>
            <span class="bgblue cfff lh30 m-l-20 p-l-20 p-r-20 bradius4 m-r-10" @click="isShowGoodsList=true">+添加商品</span>
          </div>
          <table class="align-cen-table m-t-20 textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
            <thead>
              <tr>
                <th>产品ID</th>
                <th class="w20p">产品</th>
                <th>分类</th>
                <th>价格</th>
                <th>库存</th>
                <th>总销量</th>
                <th>发布时间</th>
              </tr>
            </thead>
            <tbody class="bgfff" v-if="goodsInfo.goodsId">
              <tr class="curpointer">
                <td v-html="goodsInfo.goodsId"></td>
                <td v-html="goodsInfo.goodsName" class="w20p"></td>
                <td v-html="goodsInfo.goodsTypeName"></td>
                <td>{{(goodsInfo.price/100).toFixed(2)}}</td>
                <td v-html="goodsInfo.goodsNum"></td>
                <td v-html="goodsInfo.dealNum"></td>
                <td>{{goodsInfo.createTime | formatDate('yyyy/MM/dd hh:mm')}}</td>
              </tr>
            </tbody>
          </table>
          <div class="">
            <span>选择商品规格</span>
          </div>
          <table class="align-cen-table m-t-20 textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
            <thead>
              <tr>
                <th>商品名称</th>
                <th>商品类型</th>
                <th>商品规格</th>
                <th>商品库存</th>
                <th>商品价格</th>
                <th class="w33p">操作</th>
              </tr>
            </thead>
            <tbody class="bgfff">
              <tr class="curpointer" v-for="spec in specList">
                <td>{{spec.goodsName}}</td>
                <td>{{spec.typeName}}</td>
                <td>{{spec.specAttribute}}</td>
                <td>{{spec.specNum}}</td>
                <td>{{spec.price | formatMoney}}</td>
                <td>
                  <div class="dis-inline-block m-r-10">
                    拼团金额
                    <input type="number" class="form-control dis-inline-block w100" v-model="spec.assemblePrice">
                    元
                  </div>
                  <div class="dis-inline-block">
                    活动库存
                    <input type="number" class="form-control dis-inline-block w120" v-model="spec.assembleNum">
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="d-flex lh40 jscen m-t-30">
            <span class="bgblue dis-inline-block cfff hoverfff w100 textc h40 bradius4 m-r-20" @click="save(0)">保存到草稿箱</span>
            <span class="bblue dis-inline-block cblue hoverfff w85 textc h40 bradius4" @click="save(1)">发布</span>
          </div>
        </div>
      </div>
      <select-goods v-if="isShowGoodsList" @cancel="isShowGoodsList=false" @confirm="chooseGoods" />
    </div>
  </div>
  <!-- All Jquery -->
  <!-- ============================================================== -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap popper Core JavaScript -->
  <!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
  <script src="js/bootstrap.min.js"></script>

  <!-- slimscrollbar scrollbar JavaScript -->
  <script src="js/perfect-scrollbar.jquery.min.js"></script>
  <!--Wave Effects -->
  <!-- <script src="js/waves.js"></script> -->
  <!--Menu sidebar -->
  <script src="js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="js/custom.min.js"></script>
  <!-- ============================================================== -->
  <!-- This page plugins -->
  <!-- ============================================================== -->
  <!--morris JavaScript -->
  <!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
  <!--c3 JavaScript -->
  <!-- <script src="../assets/node_modules/d3/d3.min.js"></script>
<script src="../assets/node_modules/c3-master/c3.min.js"></script> -->
  <!-- Popup message jquery -->
  <!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->
  <!-- ============================================================== -->
  <!-- Magnific popup JavaScript -->
  <!-- <script src="../assets/node_modules/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>
<script src="../assets/node_modules/Magnific-Popup-master/dist/jquery.magnific-popup-init.js"></script> -->
  <!-- ============================================================== -->
  <!-- Style switcher -->
  <!-- ============================================================== -->
  <!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->
  <script src="js/vue.js"></script>
  <script src="js/iview.js"></script>
  <script src="js/layer/layer.js"></script>
  <!--<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>-->
  <!--<script src="js/headers.js"></script>-->
  <!--<script src="js/Aside.js"></script>-->
  <script src="js/moment.js"></script>
  <script src="js/daterangepicker.js"></script>
  <script src="js/config.js"></script><script src="js/extend.js"></script>
  <script>
  $(function() {
    window.vw = new Vue({
      el: '#main-wrapper',
      data: {
        endDate: '',
        startDate: '',
        peopleNum: '', // 开团人数
        termOfValidity: 24, // 拼团有效期（单位小时）
        maxPurchase: '', // 单账号最多可购买数
        createLimit: '', // 开团数限制
        joinLimit: '', // 参团数限制
        isShowGoodsList: false,
        goodsInfo: {},
        specList: [],
      },
      mounted() {
        $('#time').daterangepicker({
          startDate: new Date(),
          endDate: new Date(Date.now() + 1000 * 60 * 60 * 24),
          timePicker: true,
          timePickerIncrement: 1,
          timePicker24Hour: true,
          timePickerSeconds: true,
          locale: {
            format: 'YYYY-MM-DD hh:mm:ss',
            separator: ' 到 ',
            applyLabel: '确定',
            cancelLabel: '取消',
            weekLabel: 'W',
            customRangeLabel: 'Custom Range',
            daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          }
        }).on('apply.daterangepicker', (ev, picker) => {
          this.startDate = picker.startDate.format('YYYY-MM-DD hh:mm:ss');
          this.endDate = picker.endDate.format('YYYY-MM-DD hh:mm:ss');
        });
      },
      methods: {
        dateChange(date) {
          this.startDate  = date[0]
          this.endDate =  date[1]
        },
        save(type) {
            if(!this.goodsInfo && !this.goodsInfo.goodsId){
                layer.alert('请选择商品！');
                return
            }
            if(!this.startDate || !this.endDate){
                layer.alert('请选择活动时长！');
                return
            }
            if(!this.peopleNum){
                layer.alert('成团人数不能为空！');
                return
            }
            if(!this.createLimit){
                layer.alert('单账号最多可开团数不能为空！');
                return
            }
            if(!this.joinLimit){
                layer.alert('单账号最多可参团数不能为空！');
                return
            }
            if(!this.maxPurchase){
                layer.alert('单账号最多可购买数不能为空！');
                return
            }
            if (this.specList.length === 0 ) {
                layer.alert('商品规格拼团金额和拼团库存不能为空！');
                return
            }

          let temp = this.specList.map(item => {
            return {
              specId: item.specId,
              assemblePrice: item.assemblePrice * 100,
              assembleNum: item.assembleNum
            }
          });
          $.cAjax('/crmPc/assemble/insertGoodsAssemble', {
            data: {
              goodSpecRequestList: temp,
              goodsId: this.goodsInfo.goodsId,
              startTimes: this.startDate,
              endTimes: this.endDate,
              peopleNum: this.peopleNum,
              openRegiment: this.createLimit,
              joinRegiment: this.joinLimit,
              maxPurchase: this.maxPurchase,
              assembleType: type,
              updateType: 0
            }
          }).then(res => {
            layer.msg(type == 1 ? '发布成功' : '保存成功');
            setTimeout(function() {
              history.back();
            }, 1.5 * 1000);
          })
        },
        // 选择商品
        chooseGoods(goodsInfo) {
          if (!goodsInfo) {
            layer.msg('请选择商品！');
            return;
          }

          this.specList = [];

          for (let i = 0; i < goodsInfo.goodSpecModelList.length; i++) {
            let type = goodsInfo.goodSpecModelList[i];

            for (let j = 0; j < type.goodSpecModelList.length; j++) {
              let spec = type.goodSpecModelList[j];

              spec.goodsName = goodsInfo.goodsName;
              spec.typeName = type.specName;
              spec.assemblePrice = '';
              spec.assembleNum = '';

              this.specList.push(spec);
            }
          }
          this.goodsInfo = goodsInfo;
          this.isShowGoodsList = false;
        },
      }

    })
  })
  </script>
</body>

</html>
